<template>
  <div class="app-container-box">
    <div class="box-tag" />
    <span class="title-text">观看页主题设置</span>
    <div class="channel-type-filter-box">
      <span class="channel-type-text">频道分类: </span>
      <el-radio-group v-model="channelType" class="radio-group">
        <el-radio-button class="user-radio" label="common">通用版</el-radio-button>
        <el-radio-button class="user-radio" label="science">科技版</el-radio-button>
        <el-radio-button class="user-radio" label="medical">医疗版</el-radio-button>
      </el-radio-group>
    </div>
    <div class="warp-line-top" />
    <div class="warp-line-middle" />

    <div class="page-button-box">
      <span class="page-button-text">页脚信息: </span>
      <el-input v-model="displayLiveData.FooterText" class="page-button-input" placeholder="请输入页脚信息" />
      <span class="pag-button-text-limit">{{ displayLiveData.FooterTextLength }}/{{ displayLiveData.FooterTextMaxLimit }}</span>
    </div>

    <div class="channel-logo">
      <span>频道图标: </span>
      <el-upload
        class="avatar-uploader"
        :action="fileUploadAddr"
        :show-file-list="false"
        :on-success="handleLogoImageSuccess"
        :before-upload="beforeAvatarUpload"
        :headers="fileUploadHeaders"
      >
        <img v-if="displayLiveData.LogoImage" :src="displayLiveData.LogoImage" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
    </div>

    <div class="channel_img_text-box">
      <p>
        图片尺寸：128*128px；<br>
        图片大小：5M以内； 图片格式：png、jpg、jpeg；<br>
      </p>
    </div>

    <div class="channel-background">
      <span>背景图片: </span>
      <el-upload
        class="avatar-uploader"
        :action="fileUploadAddr"
        :show-file-list="false"
        :on-success="handleBackgroundImageSuccess"
        :before-upload="beforeAvatarUpload"
        :headers="fileUploadHeaders"
      >
        <img v-if="displayLiveData.PcBackgroundImage" :src="displayLiveData.PcBackgroundImage" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
    </div>

    <div class="channel_background_text-box">
      <p>
        图片尺寸：宽1920px，高度不限；<br>
        图片大小：5M以内；图片格式：PNG、JPG、JPEG；<br>
      </p>
    </div>

    <div class="bg-color-settng-box">
      <span>观看页背景色: </span>
      <el-color-picker v-model="displayLiveData.BackgroundColor" class="color-picker" />
    </div>

    <el-button class="submit-set-default-button" @click="setDefault">恢复默认</el-button>
    <el-button class="submit-change" type="primary" :loading="submitLoading" @click="updateLiveReq">提交</el-button>

    <span class="over-view-text">预览</span>

    <div class="overview-image">
      <el-image :src="require('@/assets/subject_setting_overview.png')">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { updateLive } from '@/api/lives'
export default {
  name: 'SubjectSetting',
  data() {
    return {
      submitLoading: false,
      channelType: 'common',
      watchChangedData: {
        inputPageButton: ''
      },
      fileUploadAddr: '',
      fileUploadHeaders: {
        Authorization: ''
      },
      // 展示数据
      displayLiveData: {
        PcBackgroundImage: '',
        LogoImage: '',
        FooterText: '',
        BackgroundColor: '#F3F7FE',
        FooterTextLength: 0,
        FooterTextMaxLimit: 25
      },
      // 更新数据
      updateLiveData: {
        PcBackgroundImage: '',
        BackgroundColor: '',
        LogoImage: '',
        FooterText: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'choicedLive',
      'token'
    ])
  },
  watch: {
    'choicedLive'(n, o) {
      // Logo图片
      this.displayLiveData.LogoImage = n.LogoImage
      // 背景颜色
      this.displayLiveData.BackgroundColor = n.BackgroundColor || '#F3F7FE'
      // 播放器预览图
      this.displayLiveData.PcBackgroundImage = n.PcBackgroundImage
      // 页脚信息
      this.displayLiveData.FooterText = n.FooterText
      this.displayLiveData.FooterTextLength = this.displayLiveData.FooterText.length
    },
    'token'(n, o) {
      this.fileUploadHeaders.Authorization = n
    }
  },
  mounted() {
    // token
    this.fileUploadHeaders.Authorization = this.token
    // 上传文件地址
    this.fileUploadAddr = process.env.VUE_APP_BASE_API + '/api/v1/files'
    if (this.choicedLive.id) {
      // Logo图片
      this.displayLiveData.LogoImage = this.choicedLive.LogoImage
      // 背景颜色
      this.displayLiveData.BackgroundColor = this.choicedLive.BackgroundColor
      // 播放器预览图
      this.displayLiveData.PcBackgroundImage = this.choicedLive.PcBackgroundImage
      // 页脚信息
      this.displayLiveData.FooterText = this.choicedLive.FooterText
      this.displayLiveData.FooterTextLength = this.displayLiveData.FooterText.length
    }
  },
  methods: {
    // 播放器预览图片成功回调
    handleBackgroundImageSuccess(res, file) {
      // this.fileUploadAddr = URL.createObjectURL(file.raw)
      if (res.data.length > 0) {
        this.updateLiveData.PcBackgroundImage = res.data[0].AccessAddress
        this.displayLiveData.PcBackgroundImage = res.data[0].AccessAddress
      }
    },
    // 上传logo图片成功回调
    handleLogoImageSuccess(res, file) {
      if (res.data.length > 0) {
        this.updateLiveData.LogoImage = res.data[0].AccessAddress
        this.displayLiveData.LogoImage = res.data[0].AccessAddress
      }
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 5

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      // return isJPG && isLt2M
      return isLt2M
    },
    sendUploadFIleReq(ev) {
    },
    // 恢复默认
    setDefault() {
      this.updateLiveData.BackgroundColor = '#F3F7FE'
    },
    // 更新直播请求
    updateLiveReq() {
      this.submitLoading = true
      const reqData = Object.assign(this.updateLiveData, this.displayLiveData)
      updateLive(reqData, this.choicedLive.id).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        }
      })
      this.submitLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container-box {
  height: 1147px;

}
.box-tag {
  width: 4px;
  height: 28px;
  background: #2E9BEA;
  border-radius: 2px;
  position: relative;
  top: 32px;
}
.title-text{
  width: 171px;
  height: 23px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4A5462;
  top: 31px;
  left: 54px;
  position: absolute;
}
.user-radio {
  margin: 0 0px 0px;

  &-div{
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #6D7A8E;
  }
  &-p{
    font-size: 20px;
  }
  // 因为设置了scoped，所以固定的classname要用::v-deep操作
  ::v-deep {
    .el-radio-button__inner {
      border: none;
      border-radius: 4px;
      color: #6D7A8E;
      font-size: 18px;
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      font-size: 18px;
      background: #2E9BEA;
      border-radius: 7px;
      font-weight: 400;
      color: #FFFFFF;
    }
  }
}
.channel-type-filter-box {
  border-radius: 7px;
  position: absolute;
  left: 83px;
  top: 93px;
  display: flex;
  height: 33px;
  align-items: center;
  .radio-group {
    margin-left: 20px;
    margin-right: 20px;
    ::v-deep {
      .el-radio-button__inner {
        font-size: 18px;
      }
    }
  }
  .channel-type-text {
  width: 86px;
  height: 20px;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #6D7A8E;
}
}
.warp-line-top {
  width: 1627px;
  height: 4px;
  background: #EDF5FB;
  top: 161px;
  position: absolute;
}
.warp-line-middle {
  width: 4px;
  height: 852px;
  background: #EDF5FB;
  position: absolute;
  top: 161px;
  left: 738px;
}
.page-button-box {
  display: flex;
  position: absolute;
  align-items: center;
  top: 191px;
  left: 83px;
  width: 600px;
  height: 36px;
  span {
    width: auto;
    height: 20px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #6D7A8E;
  }
  .page-button-input {
    width: 328px;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    }
  .pag-button-text-limit {
    width: 48px;
    height: 21px;
    font-size: 21px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #C8C8C8;
  }
}
.channel-logo {
  display: flex;
  position: absolute;
  align-items: center;
  top: 285px;
  left: 83px;
  width: 650px;
  height: 97px;
  ::v-deep {
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      margin-left: 20px;
      margin-right: 20px;
      width: 96px;
      height: 96px;
      }
  .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
  .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 96px;
      height: 96px;
      // line-height: 178px;
      text-align: center;
      }
  .avatar {
      width: 96px;
      height: 96px;
      display: block;
    }
  .el-icon-plus {
    align-items: center;
    display: flex;
    justify-content: center;
    }
}
  }
span {
    width: 86px;
    height: 20px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #6D7A8E;
}

.channel_img_text-box {
  position: absolute;
  top: 365px;
  left: 192px;
  p {
    width: auto;
    height: 57px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ABBAD1;
    line-height: 2em;
  }
}
.channel-background {
  display: flex;
  position: relative;
  align-items: center;
  top: 498px;
  left: 83px;
  width: 650px;
  ::v-deep {
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      margin-left: 20px;
      margin-right: 20px;
      width: 432px;
      height: 209px;
      }
  .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
  .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 432px;
      height: 209px;
      // line-height: 178px;
      text-align: center;
      }
  .avatar {
      width: 432px;
      height: 209px;
      display: block;
    }
  .el-icon-plus {
    align-items: center;
    display: flex;
    justify-content: center;
    }
  }
}
.channel_background_text-box {
  height: 55px;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ABBAD1;
  position: absolute;
  top: 729px;
  left: 192px;
  p {
    line-height: 2em;
  }
}
.bg-color-settng-box {
  display: flex;
  align-items: center;
  position: absolute;
  height: 50px;
  left: 44px;
  top: 873px;
  width: 500px;
  span {
    width: 126px;
    height: 20px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #6D7A8E;
  }
  ::v-deep {
    .color-picker {
    margin-left: 20px;
    margin-right: 20px;
    width: 146px;
    }
    .el-color-picker__color-inner {
      width: 146px;
    }
    .el-color-picker__trigger {
      width: 159px;
    }
  }
}
.submit-set-default-button {
  width: 159px;
  height: 50px;
  border: 1px solid #AFBDD2;
  border-radius: 10px;
  position: absolute;
  top: 919px;
  left: 193px;
  ::v-deep {
    span {
      width: 80px;
      height: 20px;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #6D7A8E;
    }
  }
}

.submit-change {
  width: 159px;
  height: 50px;
  background: #2E9BEA;
  border-radius: 10px;
  position: absolute;
  top: 1051px;
  left: 659px;
  ::v-deep {
    span {
      width: 46px;
      height: 20px;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }
  }
}
.over-view-text {
  width: 46px;
  height: 20px;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #6D7A8E;
  position: absolute;
  top: 324px;
  left: 776px;
}
.overview-image {
  position: absolute;
  height: 296px;
  width: 676px;
  top: 410px;
  left: 776px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
